@charset "utf-8";
//@import "reset";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem
}
*{
    padding: 0;
    margin: 0;
}
html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
//  background: #e3e3e3;
    position: relative;  
  header{
        width: 100%;
        height: r(208);
        background: url(../img/2-1.jpg)  no-repeat;
        background-size: 100%;       
        position: absolute;
        top: 0;
     #main{
      .icon_2_3{
            width: r(41);
            height: r(42);
//          background:yellow ;
            margin-top: r(20);
            margin-left: r(10);
            float: left;
            background: url(../img/2_3.jpg)  no-repeat;
            background-size: 100%;  
            border-radius:50% ;
        }
        #dialog {  
            background: url(../img/2_5.png)  no-repeat;
            background-size: 100%; 
//          border: 5px solid rgba(0,0,0, 0.4);  
            height: r(765);          
            margin: r(160) 0 0 r(25);         
            padding:r(180) r(36) 0 r(36);  
            position: absolute;            
            width: r(520);  
            z-index: 1;  
            border-radius:r(5);  
            display: none;  
            .icon_2_6{
                width: r(72);
                height: r(72);
                border-radius:50% ;
                position: absolute;
                top: r(-35);
                left: r(540);
            }
        } 
        .state{
          text-align: center;
        } 
        
        .rule{
            font-size: r(21);
        }
        .copyright{
            padding-top:r(20) ;
            text-align: center;
            font-size: r(21);
        }
        .logo{
            width:r(168);
            height: r(43);
            margin: 0 auto;
        }
     }
        
}
}




            
            li {
                list-style-type: none;
            }
            
            #content {
                position: relative;
                width: r(640);
                height: r(855);
                float: left;
                top: r(208);
                background:#eaeaea;
            }
           
            #content li,#begin {
            
                position: absolute;
                width: r(208);
                height: r(285);
                float: left;
                border-radius:r(10) ;
                border: 1px solid #f60;
            }
//          
            #content li.current {
                background: #090;   
            }
//          img{
//              width: 100px;
//              height: 100px;
//          }
//          
//          #begin {
//              left: 100px;
//              top: 100px;
//          }
        
                
            ul>li:nth-child(1){
                          
                top: 0;
                left:0;
            }
            ul>li:nth-child(2){
                top: 0;
                left: r(214);
               
            }
            ul>li:nth-child(3){
                top: 0;
                left: r(426);
               
            }
            ul>li:nth-child(4){
                top: r(287);
                left: r(426);
              
            }
             ul>li:nth-child(5){
                top: r(574);
                left: r(426);
              
            }
             ul>li:nth-child(6){
                top: r(574);
                left: r(214);
               
            }
            ul>li:nth-child(7){
                top: r(574);
                left:0;
          
            }
            ul>li:nth-child(8){
                top: r(287);
                left: 0;
               
            }
            #begin{                 
                 top: r(495);
                 left: r(214);
            }           
//音乐
#audio_btn { 
    width: r(41);
            height: r(42);
//          background:yellow;
            float: right;
            border-radius:50% ;
            margin-top: r(20);
            margin-right: r(10);
    
    
    
   
     background: url(../img/2_2.jpg)  no-repeat;
     background-size: 100%; 
}

.rotate {
    -webkit-animation: rotating 1.2s linear infinite;
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

@-webkit-keyframes rotating {
    from { -webkit-transform: rotate(0) }
    to { -webkit-transform: rotate(360deg) }
}

@keyframes rotating {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
    from { -moz-transform: rotate(0) }
    to { -moz-transform: rotate(360deg) }
}


    

